<template>
    <div class="block">
        <el-row class="block-item">
            
            <exInput label="url" v-model="url" width="550" size="mini"></exInput>
            <exInput label="上限记录数" v-model="maxNum" width="80" size="mini"></exInput>
            <el-button type="primary" @click="query" size="mini" style="height:28px;margin-top:4px">查询</el-button>
        </el-row>
        <exPubTable ref="curTable" :cfg.sync="newcfg" :exData="dataList">
            <exColumn label="Best Sellers Rank">
                <template scope="s">
                    <el-row v-for="(item,idx) in s.row.ranklist" :key="idx">{{item.text}}</el-row>
                </template>
            </exColumn>
            <exColumn label="图片">
                <template scope="s">
                    <el-image style="width: 100px; height: 100px" :src="s.row.imgsrc" fit="none"></el-image>
                </template>
            </exColumn>
        </exPubTable>
    </div>
</template>



<script>
import Vue from "vue";

import cheerio from "cheerio"

export default {
    data() {
        var that = this;
        return {
            isLoad: false,
            preUrl : "https://www.amazon.com",
            url : "https://www.amazon.com/Best-Sellers-Toys-Games/zgbs/toys-and-games/ref=zg_bs_toys-and-games_home_all?pf_rd_p=3defe85f-da0e-4957-b2cd-f17c0be8c183&pf_rd_s=center-1&pf_rd_t=2101&pf_rd_i=home&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=92AWNKRND1YN3G32FQT0&pf_rd_r=92AWNKRND1YN3G32FQT0&pf_rd_p=3defe85f-da0e-4957-b2cd-f17c0be8c183",
            maxNum : 10,
            lang : "&language=en_US",
            dataList:[],
            newcfg:{
                usePage:false,
                showIndex: true,
                columns: [
                    {prop:"name",label:"名称",width:300},
                    // {prop:"imgsrc",label:"图片",width:200},
                    {prop:"starNum",label:"星星数",width:100},
                    {prop:"link",label:"链接",width:300},
                    {prop:"price",label:"价格",width:120},
                    {prop:"asin",label:"ASIN",width:100}


                ],
            },
            pageLink: []
        }
    },
    computed:{
    },
    provide () {
      return {
      }
    },

    mounted() {
    },

    methods: {
        query(){
            if(!this.url) return;
            this.pageLink = [];
            this.dataList = [];
            this.cnt = 0;
            this.$axios.get(this.url+this.lang)
            .then((res) => {
                try{
                    var html = res.data;
                    this.readListInfo(html,true);
                }catch(ex){

                }
            })
        },
        querySubPage(url){
            if(!url) return;
            this.$axios.get(url+this.lang)
            .then((res) => {
                try{
                    var html = res.data;
                    this.readListInfo(html);
                }catch(ex){

                }
            })
        },
        readListInfo(html,isGetPage){
            const $ = cheerio.load(html)
            var productlist = $(".zg-item-immersion")
            for(var i=0;i<productlist.length;i++){
                var item = productlist[i]
                var row = {};
                var img = $(item).find("img");
                row.name = $(img).attr("alt")
                row.imgsrc = $(img).attr("src")
                row.starNum = $(item).find(".a-icon-row a:last").text().trim();
                row.link = this.preUrl + $(item).find(".zg-item a").attr("href")
                row.price = $(item).find(".a-color-price").text().trim();
                this.readItemInfo(row);
                this.dataList.push(row);
                this.cnt++;
                if(i==productlist.length-1 || this.cnt>=this.maxNum){
                    if(isGetPage){
                        var pages = $("#zg-center-div .a-pagination li.a-normal a");
                        for(var j=0;j<pages.length;j++){
                            var page = pages[j];
                            if($(page).find("span").length==0){
                                this.pageLink.push($(page).attr("href"))
                            }
                        }
                    }
                    if(this.pageLink.length>0){
                        var page = this.pageLink.splice(0,1)[0];
                        this.querySubPage(page);
                    }
                    break;
                }
            }
        },
        readItemInfo(row){
            if(!row.link) return;
            this.$axios.get(row.link+this.lang)
            .then((res) => {
                try{
                    var html = res.data;
                    // this.readListInfo(html);
                    
                    const $ = cheerio.load(html)
                    var list = $("#productDetails_detailBullets_sections1 tr")
                    for(var i=0;i<list.length;i++){
                        var item = list[i]
                        var name = $(item).find("th").text();
                        name = name.trim();
                        if(name=="ASIN"){
                            row.asin = $(item).find("td").text().trim();
                        }else if(name=="Best Sellers Rank" || name=="亚马逊热销商品排名"){
                            var ranklist = [];
                            var subitem = $(item).find("td > span span");
                            for(var j=0;j<subitem.length;j++){
                                var ritem = subitem[j];
                                var rrow = {}
                                rrow.text = $(ritem).text().trim();
                                rrow.link = $(ritem).find("a").attr("href")
                                ranklist.push(rrow)
                            }
                            row.ranklist = ranklist;
                        }
                    }
                    
                    // clearTimeout(this.timer);
                    // this.timer = setTimeout(() => {
                    //     this.dataList.push({})
                    //     this.$nextTick(()=>{
                    //         this.dataList.pop()
                    //     })
                    //     // this.$refs.curTable.reLoadTable();
                    // }, 500);
                    // this.dataList.push(row);
                }catch(ex){

                }
            })

        }
    }
    
}
</script>
